<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        shape="round"
        background="#3296fa"
        placeholder="请输入搜索关键词"
        @search="showSearchResult"
        @cancel="onCancel"
        @focus="isShowList = false"
      />
    </form>
    <div class="history" v-if="isShowList">
      <van-cell title="搜索历史">
        <van-icon name="delete-o" @click="clear" />
      </van-cell>
      <van-cell icon="search" v-for="(item, index) in historyList" :key="index">
        <template #title>
          <div @click="showSearchResult(item)">{{ item }}</div>
        </template>
        <van-icon name="cross" @click="del(index)" />
      </van-cell>
    </div>
    <div class="connect" v-else>
      <van-cell
        icon="search"
        v-for="(item, index) in connectList"
        :key="index"
        @click="showSearchResult(item)"
      >
        <template #title>
          <span v-html="light(item)"></span>
        </template>
      </van-cell>
      <!-- <van-cell
        icon="search"
        v-for="(item, index) in connectList"
        :key="index"
        @click="showSearchResult(item)"
      > -->
      <!-- <template #title>
          <div v-html="item"></div>
        </template>
      </van-cell> -->
    </div>
  </div>
</template>

<script>
import {
  getSearchApi,
  getSearchTechApi,
  getSuggestionListApi,
  getSearchListDelApi
} from '@/Api/search.js'
import { localSet, localGet, localDel } from '../../../utils/mylocal'

export default {
  data () {
    return {
      // 输入框的内容
      value: '',
      // 搜索结果
      time: null,
      searchList: [],
      // 搜索历史
      historyList: [],
      // 历史搜索数据和输入联想的显示判断
      isShowList: true,
      // 获得联想数据列表
      connectList: []
    }
  },
  methods: {
    // 关键字高亮显示
    light (item) {
      // 定义字符串
      const lightStr = `<span class="active">${this.value}</span>`
      // 定义正则规则（g全局匹配，i不区分大小写----m执行多行匹配）
      const reg = new RegExp(this.value, 'gi')
      // 替换匹配到的关键字
      return item.replace(reg, lightStr)
    },
    onCancel () {
      // 点击取消按钮时显示历史搜索数据
      this.isShowList = true
    },
    // 跳转搜索页面，将搜索关键字保存到本地localstorage
    async showSearchResult (item) {
      // console.log(this.value)
      // 将点击的内容item赋值给输入框value
      this.value = item
      // 跳转到搜索结果页面
      this.$router.push(`/searchResult/${item}`)
      // 将搜索的关键字添加给historyList
      this.historyList.unshift(item)
      this.historyList = [...new Set(this.historyList)]
      // 保存数据到localstorage
      localSet('history', this.historyList)
      // this.getHistoryList()
    },
    // 获取搜索历史数据
    async getHistoryList () {
      const res = await getSearchTechApi()
      // console.log(res)
      this.historyList = res.data.data.keywords
    },

    async getConnectData () {
      // 排除未输入内容时发送请求 & 删除输入的内容时联想内容为空
      if (this.value !== '') {
        const res = await getSuggestionListApi({
          q: this.value
        })
        // console.log(res)
        this.connectList = res.data.data.options
        // console.log(res.data.data.options)
        // 文字高亮方法：（大小写匹配问题待解决），使用map方法会返回一个新的数组，但在点击搜索的时候会出问题,搜索不到数据
        // this.connectList = this.connectList.map(item => {
        //   return (item = item.replace(
        //     this.value,
        //     `<span style="color:red;">${this.value}</span>`
        //   ))
        // })
        // this.connectList = this.connectList.forEach(item => {
        //   item = item.replace(
        //     this.value,
        //     `<span style="color:red;">${this.value}</span>`)
        // })
      } else {
        this.connectList = []
      }
    },
    // 清空搜索历史数据
    clear () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否清空搜索历史数据'
        })
        .then(async () => {
          await getSearchListDelApi()
          // console.log(res)
          this.historyList = []
          localDel('history')
          this.$toast.success('数据已清除')
        })
      // if (res.status === 201) {
      // }
    },
    // 搜索历史数据：删除选中项
    del (index) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否删除数据？'
        })
        .then(async () => {
          this.historyList.splice(index, 1)
          this.$toast.success('删除成功')
        })
    },
    async showDetail (value) {
      // console.log(item)
      const res = await getSearchApi({
        q: value
      })
      // console.log(res)
      if (res.status === 200) {
        this.searchList = res.data.data.results
        var artId
        this.searchList.forEach(item => {
          if (item.title === value) {
            artId = item.art_id
          }
        })
        // console.log(art_id)
      }
      this.$router.push(`/detail/${artId}`)
    }
  },
  watch: {
    // 监听输入框的内容发生变化时，调用handler方法
    // 用watch监听输入框输入的值的变化，每输入一个值就会调用方法，浪费性能，增加服务器负担，设置定时器延迟获取input内容的时间
    // 千万不要设置成setInterval，是setTimeout
    value: {
      handler (value) {
        clearTimeout(this.time)
        this.time = setTimeout(() => {
          // 输入框内容发生变化时，调用接口，获得联想数据
          this.getConnectData(value)
          // console.log(value)
        }, 300)
      }
      // 监听开始后立即调用，因为设置了定时器，所以这个用不用都没关系
      // immediate: true
    }
  },
  created () {
    this.historyList = localGet('history')
    this.getHistoryList()
    this.getConnectData()
  }
}
</script>

<style lang="less" scoped>
.search {
  ::v-deep .van-search__action {
    color: #fff;
  }
  .history {
    font-size: 12px;
    color: #333333;
  }
  ::v-deep span.active {
    color: #ff0000;
  }
}
</style>
